<template>
  <div>
    <el-card class="order-card">
      <div slot="header">订单及订单完成量</div>
      <el-row>
        <el-col :span="8" style="width: 100%;">
          <el-form class="demo-form-inline" :inline="true">
            <el-form-item label="订单时间">
              <el-select v-model="orderTime" disabled  placeholder="订单时间">
                <el-option label="按日" value="按日"></el-option>
                <!-- 其他时间选项 -->
              </el-select>
            </el-form-item>
            <el-form-item label="时间范围">
              <el-date-picker v-model="OrdersDto.startTime" type="date" placeholder="开始时间"
              ></el-date-picker>
              <el-date-picker v-model="OrdersDto.endTime" type="date" placeholder="结束时间"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="订单类型">
              <el-select v-model="orderType" placeholder="订单类型">
                <el-option label="全部" value="全部"></el-option>
                <el-option label="实时自叫车" value="1"></el-option>
                <el-option label="预约自叫车" value="2"></el-option>
                <el-option label="实时代叫车" value="3"></el-option>
                <!-- 1实时自叫车 2预约自叫车 3实时代叫车 其他订单类型选项 -->
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="queryData">查询</el-button>
              <el-button type="success" @click="loadImg">导出</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <div ref="chart" id="lineChart" style="height: 400px; width: 100%"></div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import ExcelJS from 'exceljs'
import {saveAs} from 'file-saver'
import axios from "axios";

export default {
  data() {
    return {
      //日期
      DatesInRange: [],
      chart: null,
      //未接单数量
      OrderCountsInRange: [],
      //订单完成数量
      OrderCountsInRange2: [],
      cityLevel: '全部',
      city: '全部',
      district: '全部',
      orderTime: '按日',
      OrdersDto:{
        startTime: null,
        endTime: null
      },
      orderType: '全部',
    };
  },
  mounted() {
    this.getDatesInRange();
  },
  methods: {
    queryData() {
      // if (this.OrdersDto.startTime && this.OrdersDto.endTime) {
        // 在这里编写实际的提交逻辑，比如发送请求等操作
        console.log('执行提交操作，开始时间：', this.OrdersDto.startTime, '，结束时间：', this.OrdersDto.endTime);
        this.getDatesInRange(this.OrdersDto);
      // } else {
      //   this.$message.error('请选择完整的开始时间和结束时间');
      //   console.log('请选择完整的开始时间和结束时间');
      // }
    },
    loadImg() {
      const workbook = new ExcelJS.Workbook(); // 创建工作簿
      const worksheet = workbook.addWorksheet('Sheet1'); // 添加工作表

      const chart = echarts.getInstanceByDom(this.$refs.chart) // 获取图表实例
      const base64Image = chart.getDataURL({
        pixelRatio: 2, // 导出图片的分辨率比例，默认为1，即图片的分辨率为屏幕分辨率的一倍
        backgroundColor: '#fff' // 导出图片的背景色
      })
      let image = workbook.addImage({ // 添加图片
        base64: base64Image, // 图片的base64编码
        extension: 'png'  // 图片的扩展名
      });
      worksheet.addImage(image, 'A1:J20'); // 将图片添加到工作表中
      workbook.xlsx.writeBuffer().then(function (buffer) { // 生成excel文件的二进制数据
        saveAs.saveAs(new Blob([buffer], {  // 生成Blob对象
          type: 'application/octet-stream'  // 指定文件的MIME类型
        }), '订单及订单完成量.xlsx');  // 指定文件名
      });
    },


    getDatesInRange(ordersDto) {
      if (ordersDto==null){
        console.log("getDatesInRange",ordersDto)
        ordersDto={}
      }
      axios.post("http://localhost:9999/api-cockpit/orders/getDatesInRange",ordersDto).then(res => {
        this.DatesInRange = res.data.data;
        this.getOrderCountsInRange(ordersDto)
      })
    },
    getOrderCountsInRange(ordersDto) {
      console.log("getOrderCountsInRange",ordersDto)
      axios.post("http://localhost:9999/api-cockpit/orders/getOrderCountsInRange",ordersDto).then(res => {
        this.OrderCountsInRange = res.data.data;
        this.getOrderCountsInRange2(ordersDto)
      })
    },
    getOrderCountsInRange2(ordersDto) {
      console.log("getOrderCountsInRange2",ordersDto)
      axios.post("http://localhost:9999/api-cockpit/orders/getOrderCountsInRange2",ordersDto).then(res => {
        this.OrderCountsInRange2 = res.data.data;
        this.initChart()
      })
    },

    initChart() {
      // 通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图
      this.chart = echarts.init(this.$refs.chart);
      console.log("DatesInRange", this.DatesInRange)
      console.log("OrderCountsInRange", this.OrderCountsInRange)
      console.log("OrderCountsInRange2", this.OrderCountsInRange2)
      // 使用刚指定的配置项和数据显示图表。
      this.chart.setOption({
        title: {
          text: '订单及订单完成量'
        },
        toolbox: {
          show: true,
          feature: {
            mark: {show: true},
            saveAsImage: {show: true},
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: ['订单完成数量', '未接单数量']
        },
        xAxis: {
          data: this.DatesInRange,
          axisTick: {
            alignWithLabel: true
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} 单'
          }
        },
        series: [{
          name: '订单完成数量',
          type: 'bar',
          stack: 'vistors',
          color: '#5087ec',
          barWidth: '60%',
          data: this.OrderCountsInRange2
        },
          {
            name: '未接单数量',
            type: 'bar',
            stack: 'vistors',
            color: '#68bbc4',
            barWidth: '60%',
            data: this.OrderCountsInRange
          }]
      })
    }
  }
};
</script>

